<template>
  <div>
    <button @click="increment">Click me</button>
    <p>You clicked {{ count }} times</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const count = ref(0)

const increment = () => {
  count.value++
}

const handleKeydown = (e) => {
  if (e.key === 'Enter') {
    increment()
  }
}

onMounted(() => {
  window.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown)
})
</script>
